<div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">浙江日报——报卡生成</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            批量生成卡片信息
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <form role="form" name="generateCard" method="post">
                                        <div class="form-group">
                                            <label>发行年份</label>
                                            <select class="form-control queryDiffSet" name="base_on_year" >
                                                <!-- <option value="2016" >2016</option>
                                                <option value="2017" >2017</option>
                                                <option value="2018" >2018</option> -->
                                                <for start="1" end="4">
                                                    <php>
                                                        $year = date( 'Y' ) + $i;
                                                    </php>
                                                    <option value="{$year}">{$year}</option>
                                                </for>
                                                <!--TODO: YEARS-->
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>卡号序列形式</label>
                                            <select class="form-control queryDiffSet" name="base_on_increment">
                                                <option value="9">2016X</option>
                                                <option value="99">2016XX</option>
                                                <option value="999">2016XXX</option>
                                                <option value="9999">2016XXXX</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>卡密类型</label>
                                            <select class="form-control" name="card_encry">
                                                <foreach name="cardEncry" item="type">
                                                <option value="{$type['id']}">{$type['name']}</option>
                                                </foreach>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label>数量<span style="color:red;margin:7px;font-size:12px;" id="maxCardIncrement"></span></label>
                                            <input class="form-control" type="number" name="count" value="" placeholder="请输入需生成卡片数量" min="0">
                                        </div>
                                        <div class="form-group">
                                            <label>有效日期</label>
                                            <input class="form-control date form_datetime margin-vertical-default" data-date-format="yyyy-mm-dd hh:ii:ss" name="begin_time" placeholder="起始日期">
                                            <input class="form-control date form_datetime margin-vertical-default" data-date-format="yyyy-mm-dd hh:ii:ss" name="end_time"  placeholder="失效日期">
                                        </div>
                                        <button type="submit" class="btn btn-default">提交</button>
                                    </form>

                                </div>
                                <!-- /.col-lg-6 (nested) -->
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>

        <div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='smallModalLabel'>
            <div class='modal-dialog modal-sm'>
                <div class='modal-content'>
                    <div class="modal-header">
                        <h4 calss="modal-title" id="smallModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <p>正在处理中...</p>
                    </div>
                </div>
            </div>
        </div>

        <script src="/Public/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
        <link href="/Public/css/bootstrap/bootstrap-datetimepicker.css" rel="stylesheet">
        <script src="/Public/js/bootstrap/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
        <script src="/Public/js/bootstrap/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
        <script type="text/javascript">
        $( ".form_datetime" ).datetimepicker({
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 0
        });
        </script>
        <!-- /#page-wrapper -->
        <script type="text/javascript" src="/Public/js/zjdailyCard/page.zjdailyCard.js"></script><!--TODO: adjust module js location-->
        <script type="text/javascript">
            page.zjdailyCard.generate.init( "form[name='generateCard']", "{:U('User/ZJDailyCard/generate')}", "POST" );
            page.zjdailyCard.generate.enable();
        </script>
        <script type="text/javascript">
            $( "select.queryDiffSet" ).on( "change", function(){
                    $.ajax( {
                        url: "{:U('User/ZJDailyCard/queryDiffSet')}",
                        data: { base_on_year: $( "select[name='base_on_year']" ).val(), base_on_increment: $("select[name='base_on_increment']").val() },
                        type: "post",
                        success: function( result ){
                            result.data != undefined && ( $( "input[name='count']" ).attr( "max", result.data ), $("#maxCardIncrement").html( "最大值不能超过" + result.data ));
                        },
                        error: function(){
                        }
                    } )
            } ).trigger( "change" );

            $( "select.queryDiffSet[name='base_on_year']" ).on( "change", function(){
                    var $base_on_year = $( this ).val();
                    var style = "X";
                    $( "select.queryDiffSet[name='base_on_increment']" ).find( "option" ).each( function(){
                        console.log( $(this).val() );
                        $( this ).html( $base_on_year + style );
                        style += "X";
                    } );
            } );
        </script>
